<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex align-center justify-end benben-position-layout flex wxLogin_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex align-center justify-end benben-flex-layout">
        <view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="switchTab"
          :data-url="`/pages/tabBar/home/home`">
          <text class='wxLogin_fd1_0_c0'>跳过，看好物</text>
          <text class='fu-iconfont2  wxLogin_fd1_0_c1'>&#xe7f2;</text>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout" :style="{'padding-top':`10vh`}">
        <view class='flex align-center justify-center'>
          <image class='wxLogin_fd2_0_c0' mode="aspectFit" :src='STATIC_URL+"222.png"'></image>
        </view>
        <view class='flex flex-direction align-stretch wxLogin_fd2_1'>
          <text class='wxLogin_fd2_1_c0'>申请获取以下权限</text>
          <text class='wxLogin_fd2_1_c1'>获取你的手机号码信息</text>
          <button class='wxLogin_fd2_1_c2' v-if="xianshidata==1" @tap.stop="wxGetUserProfileFunc()">授权</button>
          <button class='wxLogin_fd2_1_c2' open-type="getPhoneNumber" v-if="xianshidata==2"
            @getphonenumber="decryptPhoneNumber">手机号一键登录</button>
          <view class='flex flex-wrap align-center wxLogin_fd2_1_c3'>
            <benben-flex-switch-new class-name='flex flex' v-model="id_tk" :disabled='false'>
              <template v-slot:checked>

                <view class='flex flex position-relative align-center'>
                  <image class='wxLogin_checkfd2_1_c3_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"528.png"'></image>
                </view>

              </template>
              <template v-slot:unchecked>

                <view class='flex flex position-relative justify-end align-center'>
                  <image class='wxLogin_checkfd2_1_c3_c0_c0_c0' mode="aspectFit" :src='STATIC_URL+"213.png"'></image>
                </view>

              </template>
            </benben-flex-switch-new>
            <text class='wxLogin_fd2_1_c3_c1'>请阅读并同意</text>
            <text class='wxLogin_fd2_1_c3_c2'>《用户注册协议》</text>
            <text class='wxLogin_fd2_1_c3_c3'>与</text>
            <text class='wxLogin_fd2_1_c3_c2'>《隐私政策》</text>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        xianshidata: '1',
        "id_tk": false,
        "canIUseGetUserProfile": false,
        "logo": "",
        wxinfo: '',
        "res": {
          "userinfo": {
            "user_token": "",
            "id": "",
            "avatar": "",
            "real_name": "",
            "nickname": "",
            "email": "",
            "gender": "",
            "mobile": "",
            "birthday": "",
            "client_id": "",
            "phone": ""
          }
        }
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {

    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.getIsNewFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //新版微信登录接口
      wxGetUserProfileFunc() {
        if (!this.id_tk) {
          return this.$message.info('请阅读并同意协议内容');
        }
        uni.showLoading({
          title: this.i18n['登录中...']
        });
        let code = '';
        uni.login({
          success: res => {
            code = res.code;
            console.log(code, 'code');
            // return
            // 请求登录接口
            this.$api
              .get(global.apiUrls.wxMinWebAccessToken, {
                // encryptedData: encodeURIComponent(infoRes.encryptedData),
                // iv: encodeURIComponent(infoRes.iv),
                code: code
              })
              .then(result => {
                result = result.data;
                if (result.code == 0) {
                  uni.hideLoading();
                  // 如果后台返回来的是 result 字段,表示此账号还没有绑定过手机号 跳转到绑定手机号页面
                  // 如果后台返回的是 userinfo 字段,表示已经登录成功,把用户信息存到 store 中,并返回跳转来的页面
                  if (result.data.isTelPhone == 0) {
                    this.wxinfo = result.data
                    this.$store.commit('saveToken', result.data.token)
                    this.xianshidata = 2
                  } else if (result.data.isTelPhone == 1) {
                    console.log('this.dataList', result.data)
                    this.$store.commit('saveToken', result.data.token)
                    this.$store.commit('updateUserInfo', result.data)
                    uni.showToast({
                      title: global.i18n.t('登录成功'),
                      mask: true,
                      icon: 'none',
                      duration: 1500
                    });
                    this.$urouter.switchTab(`/pages/tabBar/home/home`);
                  }
                } else if (result.code == -999) {
                  // 服务器解析参数错误
                  uni.hideLoading();
                  this.$message.info(result.msg);
                } else {
                  uni.hideLoading();
                  this.$message.info('授权失败,请重试');
                }
              })
              .catch(err => {
                console.log('ERROR', err);
                uni.hideLoading();
                this.$message.info(err.msg);
              });
          },
          fail: err => {
            console.log('ERROR', err);
            uni.hideLoading();
          }
        })
      },

      //获取手机号码登录方法
      decryptPhoneNumber(e) {
        let _this = this;
        console.log(e)
        uni.login({
          provider: 'weixin',
          success: function(res) {
            // let extend_info = {
            //   openid: _this.wxinfo.openid,
            //   code: res.code,
            //   unionid: '',
            //   gender: '',
            //   nickname: '',
            //   avatar: '',
            //   iv: e.detail.iv,
            //   encrypteddata: e.detail.encryptedData
            // }
            // return;
            _this.$api.get(global.apiUrls.wxMinWebAccessTokenPhone, {
              third_type: "wx_miniapp",
              account_type: "mobile",
              // code: res.code,
              code: e.detail.code,
              // openid: _this.wxinfo.openid,
              iv: e.detail.iv,
              encrypteddata: e.detail.encryptedData,
              // extend_info: JSON.stringify(extend_info),
            }).then(etr => {
              if (etr.data.code == 0) {
                _this.$store.commit("saveToken", etr.data.data.token)
                _this.$store.commit("updateUserInfo", etr.data.data)
                _this.$message.info('登录成功')
                setTimeout(function() {
                  uni.switchTab({
                    url: '/pages/tabBar/home/home'
                  })
                }, 500)
              } else {
                uni.showToast({
                  title: etr.data.msg,
                  icon: 'none',
                  duration: 500
                });
              }
            }).catch((err) => {
              console.log(err);
            });
          }
        });
      },

      //获取是否适配新微信登录
      getIsNewFunc() {
        if (wx.getUserProfile) {
          this.canIUseGetUserProfile = true;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: var(--benbenbgColor1);
    background-size: 100% auto;
  }

  .wxLogin_flex_0 {
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
  }

  .wxLogin_fd1_0_c1 {
    margin: 0rpx 32rpx 0rpx 0rpx;
    font-size: 24rpx;
  }

  .wxLogin_fd1_0_c0 {
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .wxLogin_fd2_1_c3_c3 {
    color: var(--benbenFontColor2);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 33rpx;
  }

  .wxLogin_fd2_1_c3_c2 {
    color: var(--benbenFontColor0);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 33rpx;
  }

  .wxLogin_fd2_1_c3_c1 {
    color: var(--benbenFontColor2);
    font-size: 28rpx;
    font-weight: 400;
    line-height: 33rpx;
    margin: 0rpx 0rpx 0rpx 16rpx;
  }

  .wxLogin_checkfd2_1_c3_c0_c0_c0 {
    width: 32rpx;
    height: 32rpx;
  }

  .wxLogin_fd2_1_c3 {
    margin: 56rpx 0rpx 0rpx 0rpx;
  }

  .wxLogin_fd2_1_c2 {
    background: var(--benbenbgColor7);
    border-radius: 100rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
    margin: 88rpx 0rpx 0rpx 0rpx;
  }

  .wxLogin_fd2_1_c1 {
    font-size: 28rpx;
    font-weight: 400;
    color: var(--benbenFontColor2);
  }

  .wxLogin_fd2_1_c0 {
    margin: 0rpx 0rpx 24rpx 0rpx;
    font-size: 28rpx;
    font-weight: 600;
    color: var(--benbenFontColor0);
  }

  .wxLogin_fd2_1 {
    padding: 156rpx 56rpx 0rpx 56rpx;
  }

  .wxLogin_fd2_0_c0 {
    width: 180rpx;
    height: 180rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
</style>
